import React, { useEffect, useState } from 'react';
import { Button, message } from 'antd';
import ProForm, { ModalForm, ProFormDependency, ProFormSelect } from '@ant-design/pro-form';
import { PlusOutlined } from '@ant-design/icons';
import { request } from 'umi';
import { api } from '@/global';
const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default (props) => {
  const [prenode, SetPreNode] = useState<any[]>();
  const [userInfo, SetUserInfo] = useState<any[]>();
  useEffect(() => {
    async function getNodeData() {
      const data = await request(api.getProfessionalByDeptId);
      const result = await request(api.getUserInfoToSift);
      SetUserInfo(result.data);
      SetPreNode(data.data);
    }

    getNodeData();
  }, []);

  const changeNode = (id: number) => {
    const temp = prenode;

    const data = temp
      ?.filter((item) => item.deptId === id)
      .map((item) => {
        return {
          label: item.professionalName,
          value: item.id,
        };
      });

    return data;
  };

  const changeUserInfoNode = (id: number) => {
    const temp = userInfo;

    const data = temp
      ?.filter((item) => item.professionId === id)
      .map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });

    return data;
  };

  return (
    <ModalForm<{
      name: string;
      company: string;
    }>
      title="添加成员"
      trigger={
        <Button type="primary">
          <PlusOutlined />
          添加
        </Button>
      }
      autoFocusFirstInput
      modalProps={{
        onCancel: () => console.log('run'),
      }}
      onFinish={async (values: any) => {
        await waitTime(2000);
        console.log(values);

        const userId = values?.user.map((item) => {
          return item.value;
        });
        console.log(props?.id, userId);

        const data = await request(api.updateUserClasses, {
          method: 'POST',
          data: {
            classId: props?.id,
            userId,
          },
        });

        if (data.success) {
          message.success('添加成功');
          props.getBaseInfo();
          return true;
        } else {
          message.error('修改失败');
          return true;
        }
      }}
    >
      <ProForm.Group>
        <ProFormSelect
          onMetaChange={(item) => {
            console.log(item);
          }}
          request={async () => {
            const deptData = await request(api.getAllDept, {});
            const list: any[] = [];
            deptData.data.map((item: any) => {
              list.push({
                label: item.deptName,
                value: item.id,
              });
            });

            return list;
          }}
          width="sm"
          name="deptName"
          rules={[
            {
              required: true,
              message: '请选择系部',
            },
          ]}
          label="系别"
          placeholder="请选择系部"
        />
        <ProFormDependency name={['deptName']}>
          {({ deptName }) => {
            const data = changeNode(deptName);

            return (
              <ProFormSelect
                options={data}
                debounceTime={1000}
                width="sm"
                rules={[
                  {
                    required: true,
                    message: '请选择专业',
                  },
                ]}
                name="professionalName"
                label="专业"
                placeholder="请选择专业"
                tooltip="可以多选"
              />
            );
          }}
        </ProFormDependency>
        <ProFormDependency name={['professionalName']}>
          {({ professionalName }) => {
            const data = changeUserInfoNode(professionalName);
            console.log(data);

            return (
              <ProFormSelect.SearchSelect
                options={data}
                debounceTime={1000}
                width="sm"
                rules={[
                  {
                    required: true,
                    message: '请选择班级成员',
                  },
                ]}
                name="user"
                label="班级成员"
                placeholder="请选择班级成员"
              />
            );
          }}
        </ProFormDependency>
      </ProForm.Group>
    </ModalForm>
  );
};
